:root {
  --vp-c-default-1: var(--vp-c-gray-1);
  --vp-c-default-2: var(--vp-c-gray-2);
  --vp-c-default-3: var(--vp-c-gray-3);
  --vp-c-default-soft: var(--vp-c-gray-soft);
  --vp-c-brand-1: var(--vp-c-indigo-1);
  --vp-c-brand-2: var(--vp-c-indigo-2);
  --vp-c-brand-3: var(--vp-c-indigo-3);
  --vp-c-brand-soft: var(--vp-c-indigo-soft);
  --vp-c-tip-1: var(--vp-c-brand-1);
  --vp-c-tip-2: var(--vp-c-brand-2);
  --vp-c-tip-3: var(--vp-c-brand-3);
  --vp-c-tip-soft: var(--vp-c-brand-soft);
  --vp-c-warning-1: var(--vp-c-yellow-1);
  --vp-c-warning-2: var(--vp-c-yellow-2);
  --vp-c-warning-3: var(--vp-c-yellow-3);
  --vp-c-warning-soft: var(--vp-c-yellow-soft);
  --vp-c-danger-1: var(--vp-c-red-1);
  --vp-c-danger-2: var(--vp-c-red-2);
  --vp-c-danger-3: var(--vp-c-red-3);
  --vp-c-danger-soft: var(--vp-c-red-soft);


  /* Component: Button */
  --vp-button-brand-border: transparent;
  --vp-button-brand-text: var(--vp-c-white);
  --vp-button-brand-bg: var(--vp-c-brand-3);
  --vp-button-brand-hover-border: transparent;
  --vp-button-brand-hover-text: var(--vp-c-white);
  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
  --vp-button-brand-active-border: transparent;
  --vp-button-brand-active-text: var(--vp-c-white);
  --vp-button-brand-active-bg: var(--vp-c-brand-1);

  /* Component: Home */
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg,
      #fe3434 30%,
      #ff479d 70%);
  --vp-home-hero-image-background-image: linear-gradient(-45deg,
      #fe3434 50%,
      #ff479d 50%);
  --vp-home-hero-image-filter: blur(44px);


  /* Component: Custom Block */
  --vp-custom-block-tip-border: transparent;
  --vp-custom-block-tip-text: var(--vp-c-text-1);
  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
}


@media (width >=640px) {
  :root {
    --vp-home-hero-image-filter: blur(56px);
  }
}

@media (width >=960px) {
  :root {
    --vp-home-hero-image-filter: blur(68px);
  }
}

/* Component: Algolia */
.DocSearch {
  --docsearch-primary-color: var(--vp-c-brand-1) !important;
}

/* custom */
.VPNavBarSocialLinks {
  gap: 4px !important;
}
.VPSocialLinks {
  gap: 4px !important;
}
.VPSocialLink {
  width: fit-content !important;
  height: fit-content !important;
  padding: 4px;
  border-radius: 8px;
}
.VPSocialLink:hover {
  background-color: var(--vp-c-brand-soft);
}
.VPFooter {
  padding: 30px !important;
}
.dark .VPSocialLink {
  background-color: antiquewhite;
}
.dark .VPSocialLink:hover {
  background-color: rgb(255 233 204 / 91.1%);
}